<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <p id="oP"></p>
  <input type="text" id="oInput">
  <script>
    const person = {
      name: 'ifer',
      address: '河南'
    };
    const p = new Proxy(person, {
      get(obj, prop) {
        // obj 就是原对象 person
        // prop 就是你操作的属性
        // console.log(obj === person, prop)
        // 获取会触发这儿
        return person[prop]
      },
      set(obj, prop, newValue) {
        // #2 就触发这儿
        obj[prop] = newValue
        oP.innerHTML = newValue
        oInput.value = newValue
      }
    })
    oInput.oninput = function (e) {
      // #1 边输入，边赋值，一旦赋值
      p.address = e.target.value
    }
  </script>
</body>

</html>